<template>
	<view class="device-page">
		<view class="header">
			<!-- 搜索区 -->
			<view class="search-wrap">
				<view class="search-box">
					<u-icon name="search"></u-icon>
					<input class="search-input" v-model="keyword" placeholder="输入设备名称搜索"
						placeholder-class="search-placeholder" @confirm="onSearch" />
					<!-- <view class="clear" v-if="keyword" @click="keyword='';onSearch()">✕</view> -->
					<u-icon name="close-circle-fill" size="22" v-if="keyword" @click="keyword='';onSearch()"></u-icon>
				</view>
				<button class="filter-btn" @click="openFilter">筛选</button>
			</view>

			<!-- 统计 / 提示 -->
			<view class="summary">
				<text class="summary-text">共 {{ total }} 台设备</text>
			</view>
		</view>


		<!-- 设备列表 -->
		<view class="list">
			<view class="list-inner">
				<view class="card" v-for="(item, index) in devices" :key="index" @click="goDetail(item)">
					<view class="card-left">
						<view class="flex" style="align-items: center;justify-content: space-between;width: 100%;">
							<view class="device-title">{{ item.deviceName }}</view>
							<view class="device-sub">
								<text class="dot" :class="statusColor[item.deviceState]"></text>
								<text class="device-status">{{ deviceState[item.deviceState] }}</text>
							</view>
						</view>
						<view class="device-sub">
							<text>设备地址</text>
							<text class="device-status">{{ item.deviceAddr }}</text>
						</view>
						<block v-if="item.iccid">
							<view class="device-sub">
								<text>流量卡号</text>
								<text class="device-status">{{ item.iccid }}（{{item.operator}}）</text>
							</view>
							<view class="device-sub">
								<text>套餐名称</text>
								<text class="device-status">{{ item.packageName }}</text>
							</view>
							<view class="device-sub">
								<text>截止时间</text>
								<text class="device-status">{{ item.endTime }}</text>
							</view>
						</block>
					</view>
					<view class="">

						<view class="card-right" @click="toDetail(item)">
							<text class="detail">设备详情</text>
							<u-icon name="arrow-right" :size="13"></u-icon>
						</view>
						<!-- 	<view class="card-right" @click="editDeviceParams(item)" style="margin-top: 15rpx;">
							<text class="detail" style="color: red;width: 78px;">修改设备参数</text>
							<u-icon name="arrow-right"></u-icon>
						</view> -->
					</view>


				</view>

				<!-- 空状态 -->
				<view v-if="devices.length === 0" class="empty">
					<!-- <image src="/static/empty-device.png" class="empty-img" mode="aspectFit" />
					<text class="empty-text">暂无符合条件的设备</text> -->
					<u-empty mode="data" text="暂无设备">
					</u-empty>
				</view>
				<view class="" style="height: 200rpx;">

				</view>
			</view>
		</view>

		<!-- 悬浮添加按钮（居中） -->
		<!-- 		<view class="fab-wrap">
			<button class="fab" @click="addDevice">+ 添加设备</button>
		</view> -->
	</view>
</template>

<script>
	import {
		deviceListApi
	} from '@/api/index.js';

	export default {
		data() {
			return {
				keyword: '',
				deviceState: {
					0: '离线',
					1: '在线',
					2: '缺水',
					3: '异常',
				},
				statusColor: {
					0: 'red',
					1: 'green',
					2: 'orange',
					3: 'red',
				},
				devices: [],
				showFilter: false,
				filterStatus: '',
				viewportHeight: 0,
				searchData: {
					IMEI: "", //设备码
					deviceName: "", //设备名称
					deviceState: "", //设备状态(0-离线1-在线2-缺水3-异常)-非必填搜索条件
					isBound: "", //是否绑定（0-未绑定，1-已绑定，2-已注销）-非必填搜索条件
					pageNum: 1, //
					pageSize: 10, //
					orderByColumn: "create_time", //排序列
					isAsc: "desc", //排序的方向 "desc" 或者 "asc".
				},
				total: 0,
				pageFlag: false
			};
		},
		computed: {

		},
		mounted() {
			// 计算视口高度（uniapp 支持）
			const sys = uni.getSystemInfoSync();
			console.log(sys, 'sys');
			this.viewportHeight = sys.windowHeight;
		},
		onLoad(options) {
			console.log(options, 'options');
			if (options.reserve1) {
				this.searchData.reserve1 = options.reserve1;
			}
			if (options.devicestate) {
				this.searchData.deviceState = options.devicestate;
			}
			if (options.reserve2) {
				this.searchData.reserve2 = options.reserve2;
			}
		},
		onShow() {
			this.deviceList();
		},
		onReachBottom() {
			if (!this.pageFlag) {
				if (this.searchData.pageNum * this.searchData.pageSize > this.total) return
				this.searchData.pageNum += 1;
				this.deviceList(true)
			}
			console.log('触底');
		},
		onHide() {
			// console.log('切换页面');
			this.pageFlag = false
			this.searchData.pageNum = 1
		},
		methods: {
			async deviceList(next) {
				const res = await deviceListApi(this.searchData);
				console.log(res, '设备列表');
				if (this.searchData.pageNum === 1 && res.rows.length === 0) {
					this.devices = [];
					this.total = 0;
				}
				if (res.rows && res.rows.length > 0) {
					const devices = next ?
						this.devices.concat(res.rows) :
						res.rows
					this.devices = devices;
					this.total = res.total;
				} else {
					if (next) {
						this.pageFlag = true
					}
				}
			},
			// 跳转设备详情
			toDetail(item) {
				console.log(item, 'item');
				uni.navigateTo({
					url: '/pages/myDevices/detail?deviceId=' + item.deviceId
				})
			},
			editDeviceParams(item) {
				// 跳到编辑页面或弹窗
				uni.navigateTo({
					url: `/pages/myDevices/edit?deviceId=${item.deviceId}&imei=${item.imei}`
				});
			},
			onSearch() {
				// 触发搜索（已由 computed 实时生效）
				console.log('搜索：', this.keyword);
				this.pageFlag = false
				this.searchData.pageNum = 1
				this.searchData.deviceName = this.keyword;
				this.deviceList()
			},
			openFilter() {
				this.showFilter = true;
				this.onSearch();
			},
			applyFilter() {
				this.showFilter = false;
			},
			resetFilter() {
				this.filterStatus = '';
			},
			goDetail(item) {
				// 保持字段与方法名不变，实际跳转请在这里完善
				console.log('跳转设备详情：', item);
				// 示例： uni.navigateTo({ url: `/pages/device/detail?id=${item.id}` })
			},
			addDevice() {
				console.log('添加设备');
				uni.navigateTo({
					url: '/pages/myDevices/addDevices'
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.device-page {
		min-height: 100vh;
		background: #f6f7f8;
		position: relative;
		padding-bottom: 160rpx;
		/* 为悬浮按钮留空 */
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 9999;
		width: 100%;
		height: 160rpx;
	}

	/* 搜索区域 */
	.search-wrap {
		display: flex;
		align-items: center;
		padding: 16rpx 18rpx;
		gap: 14rpx;
		width: 100%;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		padding: 10rpx 16rpx;
		box-shadow: 0 6rpx 18rpx rgba(24, 35, 50, 0.04);
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		opacity: 0.6;
		margin-right: 8rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
	}

	.search-placeholder {
		color: #bfc6cc;
	}

	.clear {
		font-size: 28rpx;
		color: #999;
		padding: 6rpx;
	}

	/* 筛选按钮 */
	.filter-btn {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 0rpx 18rpx;
		font-size: 26rpx;
		color: #0081ff;
		box-shadow: 0 6rpx 18rpx rgba(254, 84, 99, 0.06);
	}

	/* summary */
	.summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 20rpx;
		color: #88909a;
		font-size: 24rpx;
	}

	/* 列表样式 */
	.list {
		padding: 0 18rpx;
		margin-top: 180rpx;
	}

	.list-inner {
		padding-bottom: 40rpx;
	}

	.card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 22rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 6rpx 18rpx rgba(20, 30, 50, 0.04);
		transition: transform 0.12s ease, box-shadow 0.12s ease;
	}

	// .card:active {
	// 	transform: translateY(2rpx);
	// 	box-shadow: 0 6rpx 22rpx rgba(20, 30, 50, 0.06);
	// }

	.card-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		flex: 1;
	}

	.device-title {
		font-size: 30rpx;
		color: #111;
		font-weight: 600;
	}

	.device-sub {
		display: flex;
		align-items: center;
		gap: 10rpx;
		color: #8b96a3;
		font-size: 24rpx;
	}

	.dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.green {
		background: #29c26a;
	}

	.red {
		background: #ff5a5a;
	}

	.orange {
		background: #ff9a3a;
	}

	.device-status {
		color: #666;
	}

	/* 右侧 */
	.card-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
		// border: 1rpx solid #000;
		margin-left: 20rpx;
	}

	.detail {
		color: #2f6cff;
		font-size: 26rpx;
	}

	.arrow {
		width: 18rpx;
		height: 18rpx;
		opacity: 0.9;
	}

	/* 空状态 */
	.empty {
		padding: 60rpx 0;
		align-items: center;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		color: #9aa4ad;
	}

	.empty-img {
		width: 160rpx;
		height: 120rpx;
		opacity: 0.9;
	}

	.empty-text {
		font-size: 26rpx;
	}

	/* 悬浮按钮 - 居中凸起 */
	.fab-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		pointer-events: none;
		background: #fff;
		width: 100%;
		padding-bottom: 50rpx;
		padding-top: 20rpx;
		/* 让内部按钮自己接收事件 */
	}

	.fab {
		pointer-events: auto;
		min-width: 320rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(90deg, #00aaff 0%, #0081ff 100%);
		color: #fff;
		border-radius: 36rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		box-shadow: 0 18rpx 40rpx rgba(254, 84, 99, 0.18);
		border: none;
	}

	/* 弹窗筛选内容 */
	.filter-popup {
		padding: 28rpx;
	}

	.filter-title {
		font-size: 30rpx;
		margin-bottom: 18rpx;
		color: #111;
		font-weight: 600;
	}

	.filter-row {
		margin-bottom: 16rpx;
	}

	.filter-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}

	.filter-options {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.filter-chip {
		padding: 10rpx 18rpx;
		border-radius: 30rpx;
		background: #f2f4f6;
		color: #6b7680;
		font-size: 24rpx;
	}

	.filter-chip.active {
		background: #0081ff;
		color: #fff;
		box-shadow: 0 8rpx 20rpx rgba(254, 84, 99, 0.12);
	}
</style>